import React from 'react'
// 当前等于layout 路由组件父页面
import { Route, Redirect } from 'react-router-dom'
import { TabBar } from 'antd-mobile' // tabBar组件
import '../../assets/fonts/iconfont.css'
import './index.css'
// 导入子路由组件
import Index from '../Index'
import HouseList from '../HouseList'
import News from '../News'
import Profile from '../Profile'

// class Aaa extends React.Component {
//   cc = () => {
//      console.log(this.props)
//    }
//    render () {
//      return (<button onClick= { this.cc }>text</button>)
//    }
// }
const tabItems = [{ // 渲染tabtBar Item 的数据
  title: '首页',
  icon: 'icon-ind',
  path: '/home/index'
},
{
  title: '找房',
  icon: 'icon-findHouse',
  path: '/home/list'
},
{
  title: '资讯',
  icon: 'icon-infom',
  path: '/home/news'
},
{
  title: '我的',
  icon: 'icon-my',
  path: '/home/profile'
}]

export default class Home extends React.Component {
  state = {
    // selectedTab: 'redTab' // 默认选中
  }
  renderTabBarItem () { // 渲染首页的函数，在vue 里面用的是v-for，reac就是拿着原来的数组生成新数组，数组的每一项都是jsx元素，然后将数组直接丢进去就好了
    // console.log(this.props)
    return tabItems.map(item => {
      return (<TabBar.Item
        title={item.title}
        key={item.title}
        icon={
          <i className={`iconfont ${item.icon}`}></i>
        }
        selectedIcon={
          <i className={`iconfont ${item.icon}`}></i>
        }
        // selected 为true就高亮， 直接拿到当前页面的urlPathName，是当前组件就高亮起
        // this指向的是home组件实例对象
        selected={ this.props.location.pathname === item.path }
        onPress={() => {
          this.props.history.push(item.path)
        }}
      >
      </TabBar.Item>)
    })
  }
  // 每次页面更新钩子函数执行后，会执行该钩子函数
  componentDidUpdate () {
  }
  render() {
    return (<div className='home'>
              {/* 路由组件模块 */}
              <Route path='/home/index' component={Index}/>
              <Route path='/home/list' component={HouseList}/>
              <Route path='/home/news' component={News}/>
              <Route path='/home/profile' component={Profile}/>
              {/* 路由重定向处理 */}
              {/* 1.可以直接将home路径显示的组件展示为index组件，再做一下精准匹配处理 */}
              {/* <Route exact path='/home' component={Index}  /> */}

              {/* 2.也可以再次使用 render属性和 Redirect组件做路由重定向处理，用户访问home url路径时，将url路径重定向为/home/index */}
              <Route exact path='/home' render= {_ => <Redirect to='/home/index' /> } />
              {/* tabBar模块 */}
              <TabBar
                unselectedTintColor="#949494"
                tintColor="#69cfa5"
                barTintColor="white"
                noRenderContent={true}
              >
               { this.renderTabBarItem() }
            </TabBar>
            </div> )
  }
}